<template>
	<view>
		<view class="view-back">
			<view class="left-back">
				<scroll-view :scroll-top="commentScrollTop" id="commentContainer" :scroll-with-animation="true"
					scroll-y="true" class="left-list-back" :style="{height: scrollViewHeight}">
					<view v-for="(item,index) in messageList" :key="index">
						<view class="left-item-back" v-if="item.type.code !=2">
							<image class="left-headerimg" @click="clickHeaderAction(item)"
								:src="item.user.account.avatarPic">
							</image>
							<view class="left-right-back">
								<view class="left-item-name">
									{{item.user.account.realName?item.user.account.realName:item.user.account.nickName}}
									<view v-if="item.user.type.code == '4'" class="lawyerTag">律师</view>
								</view>
								<view class="left-item-time">{{item.editTime?item.editTime:item.createTime}}</view>
								<view v-if="item.type.code == '0'" class="left-item-content">{{item.content}}

								</view>
								<view v-if="item.type.code == '1'">
									<view class="left-item-file-back">
										<view style="display: flex;align-items: center;"
											v-if="item.caseAttach.attachFile.fileSuffix!='aac' && item.caseAttach.attachFile.fileSuffix!='m4a'&& item.caseAttach.attachFile.fileSuffix!='mp3'">

											<!-- 图片 -->
											<image src="../../../../static/phone/jpg.png" class="left-item-fileimg"
												v-if="item.caseAttach.attachFile.fileSuffix =='jpg' || item.caseAttach.attachFile.fileSuffix=='png'"
												@click="preview(item,index)">
											</image>
											<!-- 文档 -->
											<image src="../../../../static/phone/case-detail-word.png"
												class="left-item-fileimg"
												v-if="item.caseAttach.attachFile.fileSuffix =='docx' || item.caseAttach.attachFile.fileSuffix=='doc'">
											</image>
											<!-- 表格 -->
											<image src="../../../../static/phone/case-detail-excel.png"
												class="left-item-fileimg"
												v-if="item.caseAttach.attachFile.fileSuffix =='xlsx' || item.caseAttach.attachFile.fileSuffix=='xls'">
											</image>

											<!-- ppt -->
											<image src="../../../../static/phone/case-detail-ppt.png"
												class="left-item-fileimg"
												v-if="item.caseAttach.attachFile.fileSuffix =='pptx' || item.caseAttach.attachFile.fileSuffix=='ppt'">
											</image>
											<!-- pdf -->
											<image src="../../../../static/phone/case-detail-pdf.png"
												class="left-item-fileimg"
												v-if="item.caseAttach.attachFile.fileSuffix =='pdf' || item.caseAttach.attachFile.fileSuffix =='pdfx'">
											</image>
											<text class="left-item-filename" v-if="item.caseAttach.attachFile.fileSuffix!='aac'
													&& item.caseAttach.attachFile.fileSuffix!='m4a'">{{item.caseAttach.attachFile.nameF}}</text>
											<view class="left-item-download" @click="clickDownloadAction(item)">下载
											</view>

										</view>
									</view>
									<view class="left-item-vide-back"
										v-if="item.caseAttach.attachFile.fileSuffix=='aac' || item.caseAttach.attachFile.fileSuffix=='m4a'|| item.caseAttach.attachFile.fileSuffix=='mp3'">
										<image class="left-item-videimg"
											:src="showAnition?'../../../../static/phone/case-detail-stop.png':'../../../../static/phone/case-detail-open.png'"
											@click="startPlayAction(item)"></image>
										<image class="left-item-voiceimg" src="../../../../static/pc_audio.png"></image>

									</view>
								</view>
							</view>
							<view class="left-recall-btn" v-if="item.canWithdraw" @click="clickRecallAction(item)">撤回
							</view>
						</view>
						<view class="left-item-noback" v-if="item.type.code == '2'">
							<view>{{item.content}}
								<text v-if="item.recallType.code=='0'" class="left-item-reedit"
									@click="clickReEditAction(item)">
									重新编辑</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="left-bottom-back" @touchstart="handleStart" @touchmove="handleMove" @touchend="handleEnd">
					<view style="display: flex;">
						<view class="left-bottom-item" @click="chooseFileAction">文件</view>
						<view class="left-bottom-item" v-if="role !='client'" @click="usefulWordAction">常用语</view>
						<view class="left-bottom-item" v-if="role !='client'" @click="clickTemplateAction">模板库</view>
					</view>
					<view>
						<textarea class="left-bottom-textarea" onkeydown='if(event.keyCode==13){chatToUser();}'
							@keyup.ctrl.enter.exact="chatToUser($event)" @keyup.enter.exact="chatToUser($event,'enter')"
							v-model="textValue" :style="{height: textAreaHeight}" />
					</view>
					<view class="left-bottom-publish" @click="publishAction">发 布</view>
				</view>
			</view>
			<view class="right-back">
				<view class="right-item">
					<view class="right-item-name">案件编号:</view>
					<view class="right-item-text">{{itemDetail.no}}</view>
				</view>
				<view class="right-item">
					<view class="right-item-name">案件状态:</view>
					<view class="right-item-status" v-if="!showStatusSelect">{{itemDetail.status.desc}}</view>
					<view v-if="role !='client' && itemDetail.status.desc == '待启动' && !showStatusSelect"
						style="display: flex;">
						<image class="right-item-edit" src="../../../../static/phone/phone_edit.png"
							@click="clickStatueChangeAction"></image>
						<view class="right-item-status-btn" @click="clickFinishAction">完成</view>
						<view class="right-item-status-btn right-item-status-btn1" @click="clickFinalAction">结案</view>
					</view>
					<view v-if="role !='client' && itemDetail.status.desc == '待启动' && showStatusSelect"
						style="display: flex;align-items: center;">
						<dataSelect style="width: 100px;" v-model="selectStatus" :localdata="statusList"
							@change="statusChangeAction" :clear="false"></dataSelect>
						<view class="right-item-status-btn" @click="clickSaveStatusAction">保存</view>
						<view class="right-item-status-btn right-item-status-btn1"
							@click="clickHidenStatueChangeAction">取消</view>
					</view>
				</view>
				<view class="right-item">
					<view class="right-item-name">咨询内容:</view>
					<view class="right-item-text">{{itemDetail.content}}</view>
				</view>
				<view class="right-item">
					<view class="right-item-name">所属客户:</view>
					<view class="right-item-status">{{itemDetail.custName}}</view>
				</view>
				<view class="right-item  right-item-center" @click="clickLawyerListAction">
					<view class="right-item-name">承办律师:</view>
					<view class="right-item-law">
						<image v-for="(item ,index) in lawyerList" :key="index" v-if="index < 5"
							:class="[ index == 0 ?  'right-item-headerimg' : 'right-item-headerimg right-item-headerimgright' ]"
							:src="item.user.account.avatarPic"></image>
					</view>
					<image class="right-item-arrow" src='../../../../static/arrow_right.png'></image>
				</view>
				<view class="right-item  right-item-center" @click="clickCustomerListAction">
					<view class="right-item-name">参与用户:</view>
					<view class="right-item-law">
						<image v-for="(item ,index) in customerList" :key="index" v-if="index < 5"
							:class="[ index == 0 ?  'right-item-headerimg' : 'right-item-headerimg right-item-headerimgright' ]"
							:src="item.user.account.avatarPic"></image>
					</view>
					<image class="right-item-arrow" src='../../../../static/arrow_right.png'></image>
				</view>
				<view class="right-line"></view>
				<view class="right-btn-back">
					<view class="right-btn" @click="clickScheduleAction">案件日常</view>
					<view class="right-btn" @click="clickFileListAction">查看文件</view>
				</view>
				<view class="right-btn-back">
					<view class="right-btn" v-if="role !='client'" @click="clickTemplateListAction">查看模板库</view>
					<view class="right-btn" v-if="role !='client'" @click="clickWorkTimeAction">工作时间记录</view>
				</view>
				<view class="focus-back" @click="clickFocusAction">
					<image class="focus-image" src="../../../../static/pc_message.png"></image>
					<view>关注公众号，接收案件通知</view>
					<image class="focus-image-arrow" src="../../../../static/arrow_right.png"></image>
				</view>
			</view>
		</view>
		<lawyerInfo v-if="showLawer" :selectItemID="lawyerID" @clickLawInfoClose='clickLawInfoClose'>
		</lawyerInfo>
		<lawyerList v-on:successBack='getCaseUserLawyers()' v-if="showLawyerList" :selectItemID="id"
			@clickLawListClose='clickLawListClose'></lawyerList>
		<customerList v-on:successBack='getCaseUserUsers()' v-if="showCustomerList" :selectItemID="id"
			@clickCustomerListClose='clickCustomerListClose'></customerList>
		<pop-select v-model="showWord" :x="wordx" :y="wordy" placement="bottom-start" dynamic>
			<view>
				<view class="word-top">
					<view class="word-top-message">常用语</view>
					<view class="word-remaind" @click="clickSetWordAction">设置</view>
				</view>
				<scroll-view scroll-y="true" class="word-scroll">
					<view class="word-item" v-for="(item,index) in wordData" :key="index"
						@click="clickWordAction(item)">
						{{item.content}}
					</view>
				</scroll-view>

			</view>
		</pop-select>
		<wordSet v-on:successBack='getPhrase()' v-if="showWordSet" @setWordClose='clickSetWordClose'></wordSet>
		<pop-select v-model="showTemplate" :x="templatex" :y="templatey" placement="bottom-start" dynamic>
			<view>
				<view class="word-top">
					<input @input="onKeyInput" class="selectLaw" v-model="templateInput"></input>
					<view class="word-remaind template-search" @click="clickSetWordAction">搜索</view>
				</view>
				<scroll-view scroll-y="true" class="word-scroll">
					<view class="word-item word-item1" v-for="(item,index) in templateData" :key="index"
						@click="clickTemplateItemAction(item)">
						<!-- 图片 -->
						<image src="../../../../static/phone/jpg.png" class="left-item-fileimg1"
							v-if="item.fileSuffix =='jpg' || item.fileSuffix=='png'">
						</image>
						<!-- 文档 -->
						<image src="../../../../static/phone/case-detail-word.png" class="left-item-fileimg1"
							v-else-if="item.fileSuffix =='docx' || item.fileSuffix=='doc'">
						</image>
						<!-- 表格 -->
						<image src="../../../../static/phone/case-detail-excel.png" class="left-item-fileimg1"
							v-else-if="item.fileSuffix =='xlsx' || item.fileSuffix=='xls'">
						</image>

						<!-- ppt -->
						<image src="../../../../static/phone/case-detail-ppt.png" class="left-item-fileimg1"
							v-else-if="item.fileSuffix =='pptx' || item.fileSuffix=='ppt'">
						</image>
						<!-- pdf -->
						<image src="../../../../static/phone/case-detail-pdf.png" class="left-item-fileimg1"
							v-else-if="item.fileSuffix =='pdf' || item.fileSuffix =='pdfx'">
						</image>
						<image src="../../../../static/phone/case-detail-word.png" class="left-item-fileimg1" v-else>
						</image>
						<view class="item-content">
							{{item.name}}
						</view>
						<view class="item-content-class">
							{{item.classify.name}}
						</view>

					</view>
				</scroll-view>

			</view>
		</pop-select>
		<uni-popup ref="alertFinishDialog" type="dialog">
			<uni-popup-dialog type="danger" cancelText="取消" confirmText="确定" title="确定完成吗？"
				content="完成后，案件状态变更为【已完成】，不可再直接更改案件状态。" @confirm="finishConfirmAction" @close="dialogFinishClose">
			</uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="alertFinalDialog" type="dialog">
			<uni-popup-dialog type="danger" cancelText="取消" confirmText="确定" title="确定结案吗？"
				content="结案后，案件状态变更为【已结案】，不可再直接更改案件状态。" @confirm="finishFinalAction" @close="dialogFinalClose">
			</uni-popup-dialog>
		</uni-popup>
		<workTime v-if="showWorkTime" :ID="id" @workTimeClose='clickWorkTimeClose'></workTime>
		<fileList v-if="showFileList" :ID="id" @fileListClose='clickFileListClose'></fileList>
		<templateList v-if="showTemplateList" @templateListClose='clickTemplateListClose'></templateList>
		<!-- 展示二维码 -->
		<uni-popup ref="showConcern" background-color="#fff">
			<view class="popup-content">
				<view class="popup-message-center-top1">
					<text class="popup-message-center-top-title2">关注公众号</text>
					<image src="../../../../static/phone/close1.png" class="message-center-top-img2"
						@click="clickConcernClose"></image>
				</view>
				<view style="display: flex;align-items: center;justify-content: center;">

					<image class="concern" mode="scaleToFill" :src="bindQrUrl"></image>

				</view>
				<view class="popup-message-center-top2">
					<text class="popup-message-center-top-title2">关注公众号，接收案件通知</text>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import lawyerInfo from "@/packageC/PhonePC/info/lawyerInfo.vue"
	import lawyerList from "@/packageC/PhonePC/info/lawyerList.vue"
	import customerInfo from "@/packageC/PhonePC/info/customerInfo.vue"
	import customerList from "@/packageC/PhonePC/info/customerList.vue"
	import popSelect from '@/components/popSelect/popSelect.vue'
	import wordSet from "@/packageC/PhonePC/caseList/caseDetail/wordSet.vue"
	import dataSelect from "@/components/data-select/dataselect.vue"
	import requsetFileId from '@/pages/utils/upload.js'
	import workTime from "@/packageC/PhonePC/workTime/workTime.vue"
	import fileList from "@/packageC/PhonePC/fileList/fileList.vue"
	import templateList from "@/packageC/PhonePC/caseList/caseDetail/showTemplate.vue"

	let app = ''

	export default {
		components: {
			lawyerInfo,
			lawyerList,
			popSelect,
			wordSet,
			customerInfo,
			customerList,
			dataSelect,
			workTime,
			fileList,
			templateList
		},
		data() {
			return {
				scrollViewHeight: '500px',
				textAreaHeight: '60px',
				textAreaHeightNum: 60,
				textAreaStartY: '',
				showWord: false,
				wordx: 0,
				wordy: 0,
				wordData: [],
				showWordSet: false,
				showTemplate: false,
				templatex: 0,
				templatey: 0,
				templateData: [],
				templateInput: '',
				id: '',
				role: '', //当前登录角色
				roleUrl: '',
				itemDetail: {},
				lawyerList: [], //承办律师
				showLawer: false, //显示律师详情
				showLawyerList: false, //显示承办律师
				customerList: [], //参与用户
				showCustomer: false, //显示律师详情
				showCustomerList: false, //显示承办律师

				statusList: [], //案件状态
				showStatusSelect: false, //显示案件状态选择 
				selectStatus: '',
				messageList: [],
				textValue: '', //编辑发布内容
				commentScrollTop: 10000,
				lawyerID: '',
				recallId: '', //重新编辑
				timer: null, //音频播放动画
				showAnition: false, //显示动画
				fileItem: {}, //已上传文件

				showWorkTime: false,
				showFileList: false,
				showTemplateList: false,
				showConcern: false,
				bindQrUrl: ''

			}
		},
		onLoad(option) {
			var _this = this;
			app = getApp()
			this.id = option.id
			_this.role = app.globalData.role
			_this.roleUrl = _this.$roleUrl({
				tab: _this.role
			})
			_this.scrollViewHeight = parseInt(app.globalData.screenHeight - _this.textAreaHeightNum - 200) + 'px'
			this.getDetail();
			this.getCaseUserLawyers();
			this.getCaseUserUsers();
			this.getParam_case_status();
			this.getCaseChatList();
			this.getPhrase();
			this.getTemplate();
		},
		onShow() {
			//判断当前用户是否关注公众号
			this.focus()
		},
		onunload() {
			clearTimeout(this.timer);
			this.timer = null;
		},
		methods: {
			async focus() {
				let _this = this
				const res = await _this.$myRequest({
					url: `/wx/mp/user/${app.globalData.appidKey}/focus`,
					headers: {
						"token": uni.getStorageSync("accessToken"),
					},
					method: 'GET', //默认是GET
				})
				console.log('focus', res)
				if (!res.data.data) {
					//获取二维码
					_this.bindQr()
				}
			},

			/**
			 * 获取公众号二维码
			 */
			async bindQr() {
				let _this = this
				const res = await _this.$myRequest({
					url: `/wx/mp/user/44faee/bindQr`,
					headers: {
						"token": uni.getStorageSync("accessToken"),
					},
					method: 'GET', //默认是GET
				})
				console.log('二维码', res)
				if (res.data.code == 200) {
					_this.bindQrUrl = res.data.data.url
				}
			},
			/**
			 * 获取详情
			 */
			async getDetail() {
				let _this = this
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/case/${_this.id}`,
					method: 'GET', //默认是GET
				})
				console.log('详情', res)
				if (res.data.code == 200) {
					_this.itemDetail = res.data.data
					// _this.status = _this.itemDetail.status.code
					// _this.statusDesc = _this.itemDetail.status.desc
				}
			},
			//发布
			//发送给客户
			chatToUser: function(e) {
				console.log('333')
				let _this = this;
				//用户点击了ctrl+enter触发
				if (e.ctrlKey && e.keyCode == 13) {
					this.textValue += '\n';
					return;
				}

			},

			async publishAction() {
				let _this = this
				if (_this.recallId) { //重新编辑
					_this.requestReEditAction();
				} else {
					const res = await _this.$myRequest({
						url: `/${_this.roleUrl}/caseChat/text`,
						data: {
							caseId: _this.id,
							content: _this.textValue
						},
						method: 'POST', //默认是GET
					})
					if (res.data.code === 200) {
						uni.showToast({
							title: '发送成功!',
							icon: 'success'
						})
						_this.textValue = ''
						_this.recallId = ''
						_this.getCaseChatList()
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				}
			},
			/**
			 * 承办律师
			 */
			async getCaseUserLawyers() {
				let _this = this
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseUser/lawyers`,
					data: {
						caseId: _this.id,
					}
				})
				if (res.data.code == 200) {
					let list = res.data.data
					_this.lawyerList = res.data.data
				}
			},
			/**
			 * 参与用户
			 */
			async getCaseUserUsers() {
				let _this = this
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseUser/users`,
					data: {
						caseId: _this.id,
					}
				})
				if (res.data.code == 200) {
					_this.customerList = res.data.data
				}
			},


			/**
			 * 获取交流记录
			 */
			async getCaseChatList() {
				let _this = this
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseChat/list`,
					data: {
						caseId: _this.id,
						page: 1,
						size: 10000,
						asc: "createTime"
					},
					method: 'POST', //默认是GET
				})
				// console.log('交流记录', res)
				if (res.data.code == 200) {
					_this.messageList = [];
					_this.recallId = '';
					let list = res.data.data.list
					// _this.count = res.data.data.count
					let userId = app.globalData.userInfo.userId
					for (var i = 0; i < list.length; i++) {

						if (list[i]['type']['code'] === '1') {
							let name = list[i]['caseAttach']['attachFile']['name']
							let nameArray = name.split('.')
							//后缀
							let nameL = nameArray[nameArray.length - 1]
							//后缀前面的部分
							let nameF = name.substring(0, name.length - nameL.length - 1)
							// console.log('nameF',nameF)

							if (name.length > 20) {
								nameF = nameF.substring(0, 17) + '...' + nameL
							} else {
								nameF = name
							}
							list[i]['caseAttach']['attachFile']['nameF'] = nameF

							if (nameL == 'm4a' || nameL == 'aac') {
								list[i]['openOrStopMusic'] = false
							}
						}

						//判断这条信息是不是当前登录人编辑的
						if (list[i]['createBy'] == userId) {
							let createTime = list[i]['createTime']
							createTime = new Date(createTime)
							let time = createTime.getTime()
							let nowTime = new Date()
							let timeDifference = nowTime.getTime() - time; //时间差的毫秒数


							if (timeDifference < 24 * 60 * 60 * 1000) {
								//发布时间和现在相比小于24小时  可以撤回
								list[i]['canWithdraw'] = true
							} else {
								list[i]['canWithdraw'] = false
							}
						}

						_this.messageList.push(list[i])
					}

					_this.$nextTick(() => {
						_this.scrollToBottom()
					})


				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			},
			//滚动到底部
			scrollToBottom() {
				var _this = this;
				let query = uni.createSelectorQuery().in(_this)
				query.select('#commentContainer').boundingClientRect()
				// query.select('#commentContent').boundingClientRect()
				query.exec((res) => {
					console.log(res)
					//如果子元素高度大于父元素高度(显示高度)
					if (res[0].height) {
						//计算出二者差值就是需要滚动的距离
						console.log('滚动到底部')
						_this.commentScrollTop += 100;
					}
				})
			},

			//获取案件状态
			async getParam_case_status() {
				let _this = this
				const res = await _this.$myRequest({
					url: "/comm/dict/list/param_case_status	",
				})
				console.log('案件状态', res)
				if (res.data.code == 200) {
					let list = res.data.data
					for (var i = 0; i < list.length; i++) {
						list[i]['text'] = list[i]['name']
					}
					_this.statusList = list
					// console.log(_this.statusList)
				}
			},
			/**
			 * 案件状态提交
			 */
			async clickSubmit() {
				let _this = this
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/case/customize`,
					data: {
						caseId: _this.itemDetail.id,
						bizStatus: _this.selectStatus
					},
					method: 'PUT', //默认是GET
				})
				console.log('修改案件状态', res)
				if (res.data.code == 200) {
					uni.showToast({
						title: '修改成功!',
						icon: 'success',
					})
					_this.clickHidenStatueChangeAction()
					_this.getDetail();
					_this.refreshPrePageData();
				}
			},

			/**
			 * 预览文档
			 */
			async preview(item, index) {
				uni.showLoading({
					title: '正在加载...'
				})
				let url = item.caseAttach.attachFile.fileUrl
				const res = await this.$myRequest({
					url: `/comm/oss/url`,
					data: {
						ossPath: url
					},
					method: 'GET', //默认是GET
				})
				// console.log('获取文件路径',res)

				if (res.data.code == 200) {
					let ss = res.data.data.url
					if (item.caseAttach.attachFile.fileSuffix == 'jpg' || item.caseAttach.attachFile.fileSuffix ==
						'png') {
						let ssl = []
						ssl.push(ss)
						uni.previewImage({
							indicator: "none", //图片指示器样式
							current: 0,
							urls: ssl,
							success: (img) => {
								// console.log(img)
								uni.hideLoading()
							}
						})
					} else {
						uni.downloadFile({
							url: ss,
							success: (downloadFile) => {
								// console.log(downloadFile)
								uni.hideLoading()
								uni.openDocument({
									filePath: downloadFile.tempFilePath
								})
							}
						})
					}

				} else {
					uni.hideLoading()
				}
			},
			/**
			 * 获取常用语
			 */
			async getPhrase() {
				let _this = this
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/phrase/selector/0`,
					method: 'POST', //默认是GET
				})
				// console.log('常用语',res)

				if (res.data.code == 200) {
					_this.wordData = res.data.data
				}

			},
			/**
			 * 获取模板库
			 */
			async getTemplate() {
				let _this = this
				let parmas = {};
				if (_this.templateInput) {
					this.$set(parmas, 'name', 'lk:' + _this.templateInput)
				}
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/template/selector`,
					method: 'POST', //默认是GET
					data: parmas,
				})
				if (res.data.code == 200) {
					_this.templateData = res.data.data.list
				}
			},
			onKeyInput(event) {
				console.log(event.target.value)
				this.templateInput = event.target.value
				this.getTemplate()
			},

			//点击模板
			clickTemplateItemAction(item) {
				this.templateInput = '';
				this.showTemplate = false;
				this.requestAddTempleData(item);
			},

			//点击常用语
			clickWordAction(item) {
				this.textValue = item.content;
				this.showWord = false;
			},
			//保存状态
			clickSaveStatusAction() {
				this.clickSubmit()
			},
			//案件状态选择
			statusChangeAction() {

			},
			//显示状态选择
			clickStatueChangeAction() {
				this.showStatusSelect = true;
			},
			//隐藏状态选择
			clickHidenStatueChangeAction() {
				this.showStatusSelect = false;
			},

			/**
			 * 操作音频
			 */
			async startPlayAction(item) {
				console.log(item)
				var _this = this;
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				// innerAudioContext.src = item.caseAttach.attachFile.fileUrl;
				const res = await this.$myRequest({
					url: `/comm/oss/url`,
					data: {
						ossPath: item.caseAttach.attachFile.name
					},
					method: 'GET', //默认是GET
				})

				if (res.data.code == 200) {
					let ss = res.data.data.url

					innerAudioContext.src = ss;
					innerAudioContext.onPlay(() => {
						console.log('开始播放');
					});
					//音频刚开始播放时会调用以下函数
					innerAudioContext.onCanplay(() => {
						console.log(innerAudioContext)
						innerAudioContext.duration;
						setTimeout(() => {
							//保存总时长，这里需要用到定时器，让函数延迟执行，不然获取不到值
							//innerAudioContext对象中的duration和buffered代表音频总时长
							// 	this.audioForm.times = innerAudioContext.duration.toFixed(0)
							// 
						}, 10)
					})
					//音频播放的过程中会调用以下函数
					innerAudioContext.onTimeUpdate(() => {
						//innerAudioContext对象中的currentTime代表当前音频播放到第几秒了。
						//用总时长减去当前播放的到第几秒了,然后赋值给倒计时，就实现了倒计时的功能。
						// 	this.audioForm.duration = this.audioForm.times - innerAudioContext.currentTime.toFixed(0)
						// 
					})
					//音频播放异常时调用以下函数
					innerAudioContext.onError((res) => {
						console.log(res.errCode);
						_this.startAnimation();
						if (res.errCode == 10004) {
							uni.showToast({
								title: '不支持此音频格式',
								icon: 'none'
							})
						}

					})

				}
			},

			//开始动画
			startAnimation() {
				if (this.showAnition) {
					this.stopAnimation();
				} else {
					var _this = this;
					_this.timer = setTimeout(() => {
						// 业务逻辑	
						_this.showAnition = true;
					}, 2000)
				}

			},
			//结束动画
			stopAnimation() {
				this.showAnition = false;
				clearTimeout(this.timer);
			},
			//选择文件
			chooseFileAction() {
				this.getOss();
				var _this = this;

				wx.chooseMessageFile({
					count: 1,
					type: 'all',
					success(res) {
						console.log('选择文件:' + res)
						_this.fileItem = res.tempFiles[0];
						_this.uploadFile();
					}
				})


				// uni.chooseMessageFile({
				// 	count: 1,
				// 	type: 'file',
				// 	success: (res) => {
				// 		console.log('选择文件:' + res)
				// 		_this.fileItem = res.tempFiles[0];
				// 		_this.uploadFile();
				// 	}
				// })
			},
			//上传文件
			async uploadFile() {
				let _this = this;
				console.log(_this.fileItem)
				let uploadPath = _this.fileItem.path;
				let name = _this.fileItem.name;
				let fileSuffixArray = uploadPath.split('.');
				let fileSuffix = fileSuffixArray[fileSuffixArray.length - 1];
				uni.showLoading({
					title: '正在上传...'
				});
				console.log(uploadPath, name, fileSuffix)
				let ossPath = 'temp/test'
				const uploads = await requsetFileId.uploads(ossPath, uploadPath, name, fileSuffix)
				console.log('uploads', uploads)
				uni.hideLoading()
				if (uploads.data.code == 200) {
					var fileItem = uploads.data.data;
					_this.requestAddTempleData(fileItem)
				}
			},
			//添加模板文件
			async requestAddTempleData(fileItem) {
				let _this = this
				let data = {
					caseId: _this.id,
					content: fileItem.id
				}

				uni.showLoading({
					title: '正在上传...'
				})
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseChat/attach`,
					data: data,
					method: 'POST', //默认是GET
				})
				uni.hideLoading()
				// console.log('附件信息',res)
				if (res.data.code === 200) {
					uni.showToast({
						title: '发送成功!',
						icon: 'success'

					})
					_this.getCaseChatList()
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			},

			/**
			 * 获取上传文件临时秘钥
			 */
			async getOss() {
				let _this = this
				const res = await _this.$myRequest({
					url: "/comm/oss/sts",
					header: {
						"Authorization": "Basic ZG90Z286ZG90Z28=",
						"token": uni.getStorageSync("accessToken")
					},
				})
				console.log('获取oss上传临时密钥', res)
				if (res.data.code == 200) {
					getApp().globalData.upLoadAccess = res.data.data
					var time = Date.now()
					getApp().globalData.upLoadAccess.time = time
				}
			},
			//拖拽开始
			handleStart(e) {
				var touch = e.changedTouches[0];
				this.textAreaStartY = touch.pageY
				console.log(this.textAreaStartY)
			},
			//拖拽
			handleMove(e) {
				var touch = e.changedTouches[0];

				var distanceY = touch.pageY - this.textAreaStartY;

				if (this.textAreaHeightNum - distanceY < 180 && this.textAreaHeightNum - distanceY >= 60) {
					this.textAreaHeightNum = this.textAreaHeightNum - distanceY;
					this.textAreaHeight = this.textAreaHeightNum.toString() + 'px'
					this.textAreaStartY = touch.pageY

				}
				console.log(distanceY)
			},
			//拖拽结束
			handleEnd(e) {
				console.log(e)

				this.scrollViewHeight = parseInt(app.globalData.screenHeight - this.textAreaHeightNum - 200) + 'px';
				console.log('屏幕高度：' + app.globalData.screenHeight + '高度：' + this.scrollViewHeight)
			},



			//点击撤回
			async clickRecallAction(item) {
				let _this = this
				let id = item['id']
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseChat/recall`,
					data: {
						id: id
					},
					method: 'PUT', //默认是GET
				})
				if (res.data.code == 200) {
					uni.showToast({
						title: '撤回成功',
						icon: 'success'
					})
					_this.getCaseChatList()
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			},
			//点击下载
			async clickDownloadAction(e) {
				console.log(e)
				let url = e.caseAttach.attachFile.fileUrl
				const res = await this.$myRequest({
					url: `/comm/oss/url`,
					data: {
						ossPath: url
					},
					method: 'GET', //默认是GET
				})
				// console.log('获取文件路径',res)
				if (res.data.code == 200) {
					let ss = res.data.data.url
					if (e.caseAttach.attachFile.fileSuffix == 'jpg' || e.caseAttach.attachFile.fileSuffix == 'png') {
						const that = this;
						uni.showLoading({
							title: '正在保存图片...'
						});
						//获取用户的当前设置。获取相册权限
						uni.getSetting({
							success: (res) => {
								//如果没有相册权限
								if (!res.authSetting["scope.writePhotosAlbum"]) {
									//向用户发起授权请求
									uni.authorize({
										scope: "scope.writePhotosAlbum",
										success: () => {
											//授权成功保存图片到系统相册
											uni.getImageInfo({
												src: ss,
												success(image) {
													uni.saveImageToPhotosAlbum({
														filePath: image.path,
														success(res) {
															uni.hideLoading();
															uni.showToast({
																title: '保存成功'
															});

														},
														fail(err) {
															uni.hideLoading();
															uni.showToast({
																title: err
																	.errMsg
															})
														},
														complete() {
															uni.hideLoading()
														}
													})
												},
												fail(err) {
													uni.hideLoading();
													uni.showToast({
														title: err
															.errMsg
													})
												}
											})
										},
										//授权失败
										fail: () => {
											uni.hideLoading();
											uni.showModal({
												title: "您已拒绝获取相册权限",
												content: "是否进入权限管理，调整授权？",
												success: (res) => {
													if (res.confirm) {
														//调起客户端小程序设置界面，返回用户设置的操作结果。（重新让用户授权）
														uni.openSetting({
															success: (
																res
															) => {
																console
																	.log(
																		res
																		.authSetting
																	);
															},
														});
													} else if (res.cancel) {
														uni.showToast({
															title: "已取消！",
															icon: "none"
														});
													}
												},
											});
										},
									});
								} else {
									uni.getImageInfo({
										src: ss,
										success: function(image) {
											//如果已有相册权限，直接保存图片到系统相册
											uni.saveImageToPhotosAlbum({
												filePath: image.path,
												success: (res) => {
													uni.hideLoading();
													uni.showToast({
														title: "保存成功！",
													});
													that.isNewGift = false;
												},
												fail: (res) => {
													uni.hideLoading();
													console.log(res.errMsg);
													uni.showToast({
														title: res.errMsg,
														icon: "none"
													});
												},
												//无论成功失败都走的回调
												complete: (res) => {
													uni.hideLoading();
													uni.showToast({
														title: res.errMsg,
														icon: "none"
													});
												},
											});
										}
									})
								}
							},
							fail: (res) => {
								uni.hideLoading();
								console.log(res.errMsg);
								uni.showToast({
									title: res.errMsg,
									icon: "none"
								});
							},
						});

					} else {
						uni.showLoading({
							title: '正在下载文件...'
						});
						uni.downloadFile({
							url: ss,
							success: (downloadFile) => {
								// console.log(downloadFile)
								if (downloadFile.statusCode == 200) {
									uni.saveFile({
										tempFilePath: downloadFile.tempFilePath,
										success(res1) {

											setTimeout(() => { //可要可不要 这里测试一下是否下载成功
												//打开文档查看
												uni.hideLoading()
												uni.showToast({
													icon: 'none',
													mask: true,
													title: '文件已下载'
														.savedFilePath, //保存路径
													duration: 3000,
												});
												uni.openDocument({
													filePath: res1.savedFilePath,
													showMenu: true,
													success: function(res) {

														console.log('打开文档成功');
													},

												});
											}, 2000)
										},
										fail(res) {
											uni.hideLoading();
											console.log(res.errMsg);
											uni.showToast({
												title: res.errMsg,
												icon: "none"
											});
										}
									})
								}
							},
							fail(res) {
								uni.hideLoading();
								console.log(res.errMsg);
								uni.showToast({
									title: res.errMsg,
									icon: "none"
								});
							}
						})
					}

				}

			},
			//重新编辑
			async clickReEditAction(val) {
				console.log('重新编辑', val)
				if (val.recallType != undefined && val.recallType.code == '0') {
					let _this = this
					let recallId = val.recallId
					_this.recallId = val.recallId

					const res = await _this.$myRequest({
						url: `/${_this.roleUrl}/caseChat/${recallId}`,
						method: 'GET', //默认是GET
					})
					// console.log('撤回内容',res)
					if (res.data.code == 200) {
						let content = res.data.data.content
						_this.textValue = content
					}
				}
			},

			//重新编辑提交
			async requestReEditAction() {
				console.log('重新编辑', )
				let _this = this
				let recallId = this.recallId
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseChat`,
					method: 'PUT', //默认是GET
					data: {
						id: recallId,
						content: _this.textValue
					},
				})
				// console.log('撤回内容',res)
				if (res.data.code == 200) {
					uni.showToast({
						title: '编辑成功',
						icon: 'success'
					})
					_this.recallId = '';
					_this.textValue = '';
					_this.getCaseChatList()
				}
			},

			//点击关注公众号
			clickFocusAction() {
				console.log('点击关注公众号')
				this.$refs.showConcern.open('center')
			},

			/**
			 * 关闭
			 */
			clickConcernClose() {
				this.$refs.showConcern.close()
			},
			//点击律师头像
			clickHeaderAction(item) {
				console.log(item)
				this.lawyerID = item.user.accId;
				this.showLawer = true;
			},

			clickLawInfoClose() {
				this.showLawer = false;
			},
			//显示承办律师
			clickLawyerListAction() {
				this.showLawyerList = true;
			},
			//隐藏承办律师
			clickLawListClose() {
				this.showLawyerList = false;
			},

			//显示参与用户
			clickCustomerListAction() {
				this.showCustomerList = true;
			},
			//隐藏参与用户
			clickCustomerListClose() {
				this.showCustomerList = false;
			},
			//点击完成
			clickFinishAction() {
				this.$refs.alertFinishDialog.open()
			},
			//完成确认
			async finishConfirmAction() {
				this.fixStatus('completed')
			},
			dialogFinishClose() {

			},
			//点击结案
			clickFinalAction() {
				this.$refs.alertFinalDialog.open()
			},
			//结案完成
			async finishFinalAction() {
				this.fixStatus('closed')
			},
			dialogFinalClose() {

			},

			async fixStatus(val) {
				let _this = this
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/case/${val}`,
					data: {
						caseId: _this.itemDetail.id,
					},
					method: 'PUT', //默认是GET
				})
				if (res.data.code == 200) {
					uni.showToast({
						title: '修改成功!',
						icon: 'success',
					})
					_this.getDetail();
					_this.refreshPrePageData();
				}
			},

			//点击常用语
			usefulWordAction(e) {
				this.wordx = e.touches[0].clientX
				this.wordy = e.touches[0].clientY
				this.showWord = !this.showWord
			},



			//设置常用语
			clickSetWordAction() {
				this.showWordSet = true;
			},
			clickSetWordClose() {
				this.showWordSet = false;
			},

			//模板库
			clickTemplateAction(e) {
				this.templatex = e.touches[0].clientX
				this.templatey = e.touches[0].clientY
				this.showTemplate = !this.showTemplate
				this.templateInput = ''
			},
			// clickTemplateClose() {
			// 	this.showTemplate = false;
			// },

			//刷新前一页面
			refreshPrePageData() {
				var pages = getCurrentPages();
				var prePage = pages[pages.length - 2]
				prePage.$vm.refreshCaseListData();
			},

			//工作时间记录
			clickWorkTimeAction() {
				this.showWorkTime = true
			},
			clickWorkTimeClose() {
				this.showWorkTime = false
			},

			//查看文件
			clickFileListAction() {
				this.showFileList = true
			},
			clickFileListClose() {
				this.showFileList = false
			},

			//查看模板库
			clickTemplateListAction() {
				this.showTemplateList = true
			},
			clickTemplateListClose() {
				this.showTemplateList = false
			},




			//案件日常
			clickScheduleAction() {
				uni.navigateTo({
					url: '../../schedule/index'
				})
			},



		}

	}
</script>


<style scoped>
	page:before {
		content: '';
		position: fixed;
		left: 0;
		top: 0px;
		width: 100%;
		height: 2px;
		background-color: #eee;
		z-index: 9;
	}

	.view-back {
		display: flex;
		width: 100%;
		height: 100%;
	}

	.right-back {
		float: right;
		width: 320px;
		background-color: white;
		border-left: 1px solid #eee;
		padding: 16px;
		position: relative;
	}

	.left-back {
		flex: 1;
		height: 100vh;
		position: relative;
	}

	.right-item {
		display: flex;
		margin-top: 10px;

	}

	.right-item-center {
		display: flex;
		align-items: center;
	}

	.right-item-name {
		color: #999999;
		font-size: 14px;
		width: 75px;
		min-width: 75px;
	}

	.right-item-text {
		color: #333333;
		font-size: 14px;
	}

	.right-item-status {
		color: #2DA9C5;
		font-size: 14px;
	}

	.right-item-edit {
		width: 20px;
		height: 20px;
		margin-left: 8px;
	}

	.right-item-status-btn {
		cursor: pointer;
		width: 56px;
		height: 30px;
		background: #E8F7FB;
		border-radius: 2px;
		font-size: 14px;
		color: #2DA9C5;
		margin-left: 16px;
		display: flex;
		justify-content: center;
		margin-top: -5px;
		align-items: center;
	}

	.right-item-status-btn1 {
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		color: #333333;
		margin-left: 8px;
	}

	.right-item-law {
		cursor: pointer;
		display: flex;
		align-items: center;
	}

	.right-item-headerimg {
		background-color: #EEEEEE;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		border: #fff solid 2px;
	}

	.right-item-headerimgright {
		margin-left: -10px;
	}

	.right-item-arrow {
		margin-left: 4px;
		width: 6px;
		height: 12px;
	}

	.right-line {
		width: 100%;
		height: 1px;
		background: #EEEEEE;
		margin-top: 33px;
		margin-bottom: 30px;
	}

	.right-btn-back {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
	}

	.right-btn {
		cursor: pointer;
		width: 150px;
		height: 40px;
		background: #E8F7FB;
		border-radius: 2px;
		font-size: 14px;
		color: #2DA9C5;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.left-item-back {
		margin-bottom: 12px;
		display: flex;
		padding: 16px;
		background-color: white;
		position: relative;
	}

	.left-headerimg {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		min-width: 44px;
		background-color: #EEEEEE;
	}

	.left-recall-btn {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 40px;
		height: 25px;
		font-size: 12px;
		font-weight: 400;
		color: #2DA9C5;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.left-item-download {
		cursor: pointer;
		font-size: 12px;
		font-weight: 400;
		color: #2DA9C5;
		margin-left: 10px;
	}

	.left-right-back {
		margin-left: 8px;
	}

	.left-item-name {
		font-size: 14px;
		font-weight: 500;
		color: #333333;
		margin-top: 2px;
		display: flex;
		align-items: center;
	}

	.left-item-time {
		font-size: 12px;

		font-weight: 400;
		color: #999999;
		margin-top: 2px;
		margin-bottom: 8px;
	}

	.left-item-content {
		font-size: 14px;
		font-weight: 400;
		color: #333333;

	}

	.left-item-file-back {
		display: flex;
		align-items: center;
	}

	.left-item-fileimg {
		width: 24px;
		height: 24px;
	}

	.left-item-fileimg1 {
		width: 20px;
		height: 20px;
	}

	.left-item-filename {
		font-size: 12px;
		font-weight: 400;
		color: #333333;
		margin-left: 8px;
	}

	.left-item-vide-back {
		background: #F7F7F7;
		border-radius: 20px;
		padding: 12px;
		display: flex;
		align-items: center;
	}

	.left-item-videimg {
		width: 22px;
		height: 22px;
	}

	.left-item-voiceimg {
		width: 80px;
		height: 14px;
		margin-left: 12px;
	}

	.left-item-voicetime {
		font-size: 14px;
		color: #999999;
		margin-left: 12px;
	}

	.left-item-noback {
		font-size: 12px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 400;
		color: #999999;
		margin-bottom: 12px;
		margin-top: 12px;
	}

	.left-item-reedit {
		cursor: pointer;
		color: #2DA9C5;
		margin-left: 10px;
	}

	.left-list-back {
		/* height: 80vh; */
	}

	.left-bottom-back {
		position: absolute;
		bottom: 0px;
		width: 100%;

		background-color: white;
	}

	.left-bottom-item {
		cursor: pointer;
		margin-top: 10px;
		width: 48px;
		height: 20px;
		background: #FFFFFF;
		border-radius: 12px;
		border: 1px solid #EEEEEE;
		font-size: 10px;
		color: #666666;
		line-height: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10px;
	}

	.left-bottom-textarea {
		margin: 10px;
		margin-bottom: 60px;

		min-height: 60px;
		width: auto;
		border: 1px solid #eee;
		color: #333;
		font-size: 14px;
	}

	.left-bottom-publish {
		cursor: pointer;
		position: absolute;
		right: 16px;
		bottom: 16px;
		width: 104px;
		height: 32px;
		background: #2DA9C5;
		border-radius: 2px;
		color: white;
		font-size: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.focus-back {
		position: absolute;
		font-size: 14px;
		font-weight: 400;
		color: #999999;
		display: flex;
		justify-content: center;
		align-items: center;
		bottom: 40px;
		width: 100%;
	}

	.focus-image {
		width: 20px;
		height: 20px;
		margin-right: 4px;
	}

	.focus-image-arrow {
		width: 6px;
		height: 12px;
		margin-left: 4px;
	}

	.word-top {
		height: 50px;
		width: 350px;
		display: flex;
		align-items: center;
	}



	.word-top-message {
		margin-left: 20px;
		/* margin-top: 20px; */
		font-size: 14px;
		font-weight: 400;
		color: #999999;
	}

	.word-remaind {
		margin-right: 20px;
		/* margin-top: 20px; */
		font-size: 14px;
		font-weight: 400;
		color: #2DA9C5;
		margin-left: auto;

	}

	.template-search {
		background-color: #E8F7FB;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 8px 10px;
	}

	.word-scroll {
		max-height: 200px;
		min-height: 100px;
	}

	.word-item {
		width: 320px;
		max-width: 320px;
		font-size: 14px;
		font-weight: 400;
		color: #333333;
		margin-left: 20px;
		margin-bottom: 12px;
	}

	.word-item1 {
		display: flex;
		align-items: center;
	}

	.item-content {
		font-size: 13px;
		margin-left: 5px;
		max-width: 200px;
		width: 200px;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.item-content-class {
		font-size: 13px;
		margin-left: 5px;
		max-width: 80px;
		width: 80px;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.lawyerTag {
		background-color: #2DA9C5;
		color: white;
		font-size: 8px;
		margin-left: 4px;
		height: 14px;
		width: 22px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 4px;
	}

	.selectLaw {
		font-size: 14px;
		border: 1px solid #DCDFE6;
		border-radius: 4px;
		padding: 6px 10px;
		position: relative;
		width: 220px;
		margin-left: 20px;
		flex-direction: row;
		align-items: center;
		z-index: 100000;
		background-color: white;
	}



	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-self: center;
		padding: 20px;
	}


	.popup-message-center-top1 {
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: start;
	}

	.popup-message-center-top2 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popup-message-center-top-title2 {
		font-size: 16px;
		color: #333333;
	}

	.message-center-top-img2 {
		width: 16px;
		height: 16px;
		margin-left: auto;
	}

	.concern {
		margin: 20px;
		width: 260px;
		height: 260px;
		background: #EEEEEE;
		border-radius: 8px;
	}
</style>